<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="../react18/react.development.js"></script>
    <script src="../react18/react-dom.development.js"></script>
    <script src="../react18/babel.min.js"></script>
  </head>
  <body>
    <div id="app"></div>
    <script type="text/babel">
      /*
        JSX注意事项:
          * 只能有一个根标签
          * 不要在jsx语法标签的外部书写引号
          * 想要在JSX中混入js语法,需要使用 {}插值语法 混入js(插值语法中只能书写表达式,不能书写语句)(表达式有返回值,语句没有返回值)
          * 插值语法展示数据的规则
            - number,string 直接展示
            - 数组:把数组内部的值直接拼接展示
            - boolean类型,null,undefined,symbol类型:转为空字符串
            - Date对象,正则对象,函数对象,对象类型等都是不支持作为插值语法的值的(报错信息:Objects are not valid as a React child)
          * JSX中书写style行内样式要使用 style={{}}语法(本质其实是 style={css的键值对组成的对象})
          * 某些属性名是关键字的,需要使用其他替代,比如 class属性替换为className属性 for属性替换为htmlFor属性
          * 标签需要闭合(主要是单标签一定要书写自闭合的斜杠)
      */
      const price = 100;
      const goodName = "Iphone14";
      const helloAttrValue = "React";
      function fn() {
        return "hello";
      }
      const vDOM = (
        <div className="outer" htmlFor="123">
          <input type="text" />
          <h1 style={{ color: "red" }} data-hello={helloAttrValue}>
            商品是:{goodName}
          </h1>
          <p>价格是:{price}</p>
        </div>
      );

      ReactDOM.createRoot(document.getElementById("app")).render(vDOM);
    </script>
  </body>
</html>
